<template>
  <div>
    <el-drawer  title="负责人及电话号码" :visible.sync="drawerVisible" :with-header="false"
      :before-close="closepersonSelect">
      <div style="padding: 10px;">
        <el-table :data="leaderList" tooltip-effect="dark" style="width: 100%" ref="multipleTable"
          @select-all="onSelectAll" @selection-change="selectItem" @row-click="onSelectOp">
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column label="ID" width="50" align="center" key="userId" prop="userId" v-if="columns[0].visible" />
          <el-table-column label="姓名" align="center" key="nickName" prop="nickName" v-if="columns[1].visible"
            :show-overflow-tooltip="true" />
          <el-table-column label="电话" align="center" key="phonenumber" prop="phonenumber" v-if="columns[1].visible"
            :show-overflow-tooltip="true" />
        </el-table>
        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
          @pagination="getleaderList" />
      </div>
      <div style="margin-top: 10px;padding: 10px;">
        <el-button-group>
          <el-button type="primary" @click="submit">确定</el-button>
          <el-button @click="closepersonSelect">取消</el-button>
        </el-button-group>
      </div>
    </el-drawer>
  </div>
</template>

<script>
  import {
    listUser
  } from "@/api/system/user";
  export default {
    name: "Leader",
    data() {
      return {
        //遮罩层
        loading: true,
        //多个表格
        multipleTable: '',
        //负责人表格数据
        leaderList: [],
        // 总条数
        total: 0,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 20,
          deptId: null,
        },
        // 列信息
        columns: [{
            key: 0,
            label: `ID`,
            visible: true
          },
          {
            key: 1,
            label: `姓名`,
            visible: true
          },
          {
            key: 2,
            label: `电话`,
            visible: true
          },

        ],
      }
    },
    props: {
      drawerVisible: {
        type: Boolean,
        default: false,
      },
      deptId: {
        type: Number | String,
        default: null,
      }
    },

    created() {
      console.log('接收到的部门id', this.deptId);
      this.getleaderList();
    },
    methods: {

      /** 查询负责人列表 */
      getleaderList() {
        this.loading = true;
        if (!this.$yhFunc.isEmpty(this.deptId)) {
          this.queryParams.deptId = this.deptId;
        }
        console.log('查询参数', this.queryParams);
        listUser(this.queryParams).then(response => {
          this.leaderList = response.rows;
          this.total = response.total;
          this.loading = false;
          console.log('leaderList:', this.leaderList)
        });
      },
      //获取选中结果
      submit() {
        var peopleSelect = this.multipleSelection[0];
        console.info('获取选中结果', peopleSelect);
        this.$emit('getpeopleSelect', peopleSelect);
      },
      closepersonSelect() {
        this.$emit('closepersonSelect');
      },
      onSelectAll() {
        this.$refs.multipleTable.clearSelection();
      },
      selectItem(rows) {
        if (rows.length > 1) {
          var newRows = rows.filter((it, index) => {
            if (index == rows.length - 1) {
              this.$refs.multipleTable.toggleRowSelection(it, true);
              return true;
            } else {
              this.$refs.multipleTable.toggleRowSelection(it, false);
              return false;
            }
          });
          this.multipleSelection = newRows;
        } else {
          this.multipleSelection = rows;
        }
      },
      onSelectOp(row) {
        this.$refs.multipleTable.clearSelection();
        this.$refs.multipleTable.toggleRowSelection(row, true);
        this.multipleSelection = [];
        this.multipleSelection.push(row);
      },

    },
  }
</script>

<style>

</style>
